<template>
  <div class="feedbackDialog" v-if="showFeedbackDialog">
    <mid-dialog-box :title="title" @closeMidDialog="toggleShowDialog">
      <div class="contentBox">
        <el-form label-position="right" ref="feedbackForm" :model="feedbackData" :rules="feedbackRule">
          <el-form-item label="类型" prop="type">
            <el-select v-model="feedbackData.type" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="describe">
            <el-input
              v-model="feedbackData.describe"
              type="textarea"
              placeholder="请输入"
              maxlength="200"
              show-word-limit
              resize="none"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="imgList" :show-message="!feedbackData.imgList.length">
            <upload-img @success="success" @deleteImg="deleteImg"></upload-img>
          </el-form-item>
        </el-form>
        <footer class="flex-center">
          <div class="btn-blue" @click="submitFeedback">确定</div>
          <div class="btn-white-2" @click="cancel">取消</div>
        </footer>
      </div>
    </mid-dialog-box>
  </div>
</template>

<script>
export default {
  data () {
    const imgListValidator = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请至少上传一张图片'))
      } else {
        callback()
      }
    }
    return {
      title: '意见反馈',
      showFeedbackDialog: false,
      typeList: [
        { label: '功能异常', value: 0 },
        { label: '意见反馈', value: 1 },
        { label: '产品建议', value: 2 }
      ],
      feedbackData: {
        type: '',
        describe: '',
        imgList: []
      },
      feedbackRule: {
        type: [{ required: true, message: '请选择' }],
        describe: [{ required: true, message: '请输入' }],
        imgList: [{ required: true, validator: imgListValidator }]
      }
    }
  },
  watch: {
    showFeedbackDialog: {
      immediate: true,
      handler (val) {
        if (val) {
          this.feedbackData = {
            type: '',
            describe: '',
            imgList: []
          }
        }
      }
    }
  },
  methods: {
    toggleShowDialog () {
      this.showFeedbackDialog = !this.showFeedbackDialog
    },
    success (file) {
      const arr = []
      file.forEach(item => {
        arr.push(item.file_id)
      })
      this.feedbackData.imgList = arr
      // this.$refs.imgRules.clearValidate()
      // this.feedbackRule.imgList = [{ required: true }]
    },
    // 提交反馈
    submitFeedback () {
      // this.feedbackRule.imgList = [{ required: true, validator: this.imgListValidator }]
      this.$refs.feedbackForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('system/addAdvise', {
            adviseContent: this.feedbackData.describe,
            adviseImgs: this.feedbackData.imgList,
            adviseType: this.feedbackData.type
          }).then(res => {
            if (res.data && res.data.code === 200) {
              this.$message({
                message: '反馈成功',
                type: 'success'
              })
              this.toggleShowDialog()
            }
          })
        }
      })
    },
    deleteImg (currentList) {
      this.feedbackData.imgList = currentList
    },
    // 取消反馈
    cancel () {
      this.toggleShowDialog()
    }
  }
}
</script>

<style lang="scss" scoped>
.feedbackDialog {
  ::v-deep .dialogBox {
    .content {
      overflow: unset;
    }
  }

  .contentBox {
    padding-top: 40px;

    ::v-deep .el-form {
      border-bottom: 1px solid #fff;

      .el-form-item {
        margin-bottom: 32px;

        .el-select {
          width: 100%;
        }

        .el-form-item__label {
          width: 180px;
          padding-right: 16px;
        }

        .el-form-item__content {
          width: 400px !important;
          margin: 0 auto;
        }

        .el-input__count {
          background-color: transparent;
        }

        .el-textarea__inner {
          height: 180px;
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 3px;
          }

          &::-webkit-scrollbar-thumb {
            background-color: #d8dee9;
            border-radius: 2px;
          }
        }
      }
    }

    footer {
      margin-top: 23px;
      height: 92px;
      background-color: #fff;
    }
  }
}
</style>
